<script lang="ts">
import {DepartmentClassifyVO, Result, TableInfoPageVO, UserBO} from "~/api/responseResult"
import {classifyListTree, tablePage} from "~/api/warehouse"
import {TablePageQuery} from "~/api/requestInstance"
import {Search} from '@element-plus/icons-vue'
import {getUUID} from '~/utils';


interface IndexData {
  classifyListData: Array<DepartmentClassifyVO>;
  tablePageQuery: TablePageQuery;
  tableData: Array<TableInfoPageVO>;
  total: number;
  loading: boolean;
  positionPid: number
}

const initTablePageQuery = () => {
  return {
    tableName: '',
    type: 'all',
    companyCode: '',
    tableClassifyPid: '',
    pageNo: 1,
    pageSize: 10
  }
}
export default defineComponent({
  name: 'Index',
  props: {},

  created() {
    this.getClassifyList();
  },
  setup() {
    const changeClassifyRef = ref(null)
    const operationLogRef = ref(null)
    const router = useRouter()
    const search = Search
    const userInfo: UserBO = JSON.parse(<string>localStorage.getItem("user"))
    let state: IndexData = reactive({
      classifyListData: [],
      tablePageQuery: initTablePageQuery(),
      tableData: [],
      total: 0,
      loading: false,
      positionPid: userInfo.positionPid
    })
    const uuid = getUUID;
    const getClassifyList = async () => {
      const res: Result<Array<DepartmentClassifyVO>> = await classifyListTree()
      if (res.success) {
        state.classifyListData = res.data
        await getTablePage()
      }
    }
    const getTablePage = async () => {
      state.loading = true
      const json = {...state.tablePageQuery}
      const res: Result<Array<TableInfoPageVO>> = await tablePage(json);
      if (res.success) {
        state.tableData = res.data
        state.total = res.total
      }
      state.loading = false
    }
    const clickMenu = (item: { type: string, companyCode: string, tableClassifyPid: string }) => {
      state.tablePageQuery = initTablePageQuery()
      state.tablePageQuery.type = item.type
      state.tablePageQuery.companyCode = item.companyCode
      state.tablePageQuery.tableClassifyPid = item.tableClassifyPid
      getTablePage()
    }
    const pageFun = {
      handleSizeChange: (pageSize: number) => {
        state.tablePageQuery.pageSize = pageSize
        getTablePage()
      },
      handleCurrentChange: (pageNo: number) => {
        state.tablePageQuery.pageNo = pageNo
        getTablePage()
      }
    }

    const moveClassify = (tableClassifyPid: string, pid: string) => {
      if (changeClassifyRef.value == null) {
        return
      }
      changeClassifyRef.value.open(tableClassifyPid, pid)
    }

    const openOperationLog = () => {
      if (operationLogRef.value == null) {
        return
      }
      operationLogRef.value.open({})
    }
    return {
      search,
      pageFun,
      clickMenu,
      getClassifyList,
      getTablePage,
      ...toRefs(state),
      router,
      uuid,
      moveClassify,
      changeClassifyRef,
      operationLogRef,
      openOperationLog
    }
  }

})
</script>

<template>
  <el-row :gutter="1">
    <el-col :span="4">
      <el-card style="height: calc(100vh - 102px);overflow: auto;" class="box-card">

        <el-menu
            class="el-menu-vertical-demo"
            :default-active="'all'"
        >

          <el-menu-item index="all" @click="clickMenu({type:'all'})">全部</el-menu-item>

          <el-sub-menu
              v-for="company in classifyListData"
              :key="company.departmentCode"
              :index="company.departmentCode">
            <template #title>
              <span>{{ company.departmentName }}</span>
            </template>
            <el-menu-item :index="company.departmentCode"
                          @click="clickMenu({type: 'company', companyCode: company.departmentCode})">全部
            </el-menu-item>
            <el-menu-item
                v-for="classify in company.classifyVOList"
                :key="classify.pid"
                :index="classify.pid"
                @click="clickMenu({type: 'classify', tableClassifyPid: classify.pid})"
            >{{ classify.classifyName }}
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-card>
    </el-col>
    <el-col :span="20">
      <el-card style="height: calc(100vh - 102px);overflow: auto;" class="box-card">
        <div>
          <el-row>
            <el-col :span="18">
              <el-input v-model="tablePageQuery.tableName"
                        clearable
                        placeholder="搜索"
                        style="width: 300px"
                        @keyup.enter.native="getTablePage"
                        :prefix-icon="search"/>
            </el-col>
            <el-col :span="6">
              <div style="float: right">
                <el-button
                    v-if="[37,41,55,46].indexOf(positionPid) === -1"
                    size="small" type="primary" @click="router.push('/import/' + uuid())">新建</el-button>
                <el-button size="small" type="primary" @click="openOperationLog">操作记录</el-button>
              </div>
            </el-col>
          </el-row>


        </div>
        <el-table :data="tableData" style="width: 100%;margin-top: 10px" v-loading="loading">
          <el-table-column prop="tableName" label="表格名称">
            <template #default="scope">
              <div style="cursor:pointer" @click="router.push('/import/dataPage/' + scope.row.pid)">
                <el-icon>
                  <carbon-show-data-cards/>
                </el-icon>
                <span style="margin-left: 10px">{{ scope.row.tableName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createUserName" label="创建人"/>
          <el-table-column prop="createDate" label="创建时间"/>
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button type="text" @click="router.push('/import/' + scope.row.pid)">导入</el-button>
              <el-button v-if="scope.row.identity === 1"
                         @click="moveClassify(scope.row.tableClassifyPid, scope.row.pid)" type="text">移动
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            style="margin-top: 10px;text-align: right"
            v-model:currentPage="tablePageQuery.pageNo"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="tablePageQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="pageFun.handleSizeChange"
            @current-change="pageFun.handleCurrentChange"
        >
        </el-pagination>

        <ChangeClassify
            ref="changeClassifyRef"
            :getClassifyList="getClassifyList"
            :refresh="getTablePage"
        />
        <OperationLog ref="operationLogRef"/>
      </el-card>
    </el-col>
  </el-row>
</template>

<route lang="yaml">
meta:
  layout: home
</route>
